<template>
  <div class="production-info">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <!--        搜索顶栏-->
      <el-form :inline="true">
        <!--          可搜索筛选字段：产品名称,品类,SN8/编码
        -->
        <el-form-item>
          <!--                    <el-select-->
          <!--                            @change="getDataList"-->
          <!--                            clearable-->
          <!--                            filterable-->
          <!--                            placeholder="产品类别"-->
          <!--                    >-->
          <!--                        &lt;!&ndash;              v-model="dataForm.productTypeId"&ndash;&gt;-->
          <!--                        <el-option-->
          <!--                                :key="item.id"-->
          <!--                                :label="item.label"-->
          <!--                                :value="item.value"-->
          <!--                                v-for="item in productionTypes"-->
          <!--                        ></el-option>-->
          <!--                    </el-select>-->
        </el-form-item>
        <el-form-item>
          <!--          v-model="dataForm.name"-->
          <el-input placeholder="产品名称">
            <el-button
              @click="getDataList"
              slot="append">
            <i class="el-icon-search"/></el-button
            >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="clickInfoEdit"
            type="primary">
            <i class="el-icon-plus"/>
            新增
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="dataList"
        border
        style="width: 100%;"
        v-loading="dataListLoading"
      >
        <el-table-column
          :label="$t('img')"
          align="center"
          header-align="center"
          width="100"
        >
          <template slot-scope="scope">
            <div
              class="text-center is-align-middle is-justify-center el-row--flex"
            >
              <midea-admin-image
                :height="60"
                :origin-size="true"
                :previewable="true"
                :url="scope.row.productImage"
                :width="60"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('model.name')"
          align="center"
          header-align="center"
          prop="productName"
        />

        <el-table-column
          :label="$t('mike.sn8')"
          align="center"
          header-align="center"
          prop="productCode"
        />

        <el-table-column
          :label="'产品类别'"
          align="center"
          header-align="center"
          prop="productType"
        />
        <el-table-column
          :label="'协议名称'"
          align="center"
          header-align="center"
          prop="versionName"
        />

        <!--        <el-table-column-->
        <!--            :label="$t('mike.put_pull')"-->
        <!--            align="center"-->
        <!--            fixed="right"-->
        <!--            header-align="center"-->
        <!--        >-->
        <!--          <template slot-scope="scope" >-->
        <!--            <el-radio-group-->
        <!--                v-model="scope.row.online"-->
        <!--                @change="collectionOnlineChanged(scope.row)"-->
        <!--                v-loading.fullscreen="scope.row.requesting"-->
        <!--                size="small"-->
        <!--            >-->
        <!--              <el-radio :label="true">{{ $t("mike.put_on") }}</el-radio>-->
        <!--              <el-radio :label="false">{{ $t("mike.pull_off") }}</el-radio>-->
        <!--            </el-radio-group>-->

        <!--            &lt;!&ndash;              <el-switch&ndash;&gt;-->
        <!--            &lt;!&ndash;                @change="collectionOnlineChanged(scope.row)"&ndash;&gt;-->
        <!--            &lt;!&ndash;                v-model="scope.row.online"&ndash;&gt;-->
        <!--            &lt;!&ndash;              >&ndash;&gt;-->
        <!--            &lt;!&ndash;              </el-switch>&ndash;&gt;-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column
          :label="$t('handle')"
          align="center"
          fixed="right"
          header-align="center"
          width="160"
        >
          <template slot-scope="scope">
            <el-button
              @click="clickOnDetail(scope.row.id)"
              plain
              size="small"
              type="primary"
            >
              {{ $t("detail") }}
            </el-button>
            <el-button
              @click="deleteHandle(scope.row.id)"
              plain
              size="small"
              type="danger"
            >{{ $t("delete") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="pageCurrentChangeHandle"
        @size-change="pageSizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
      />

      <!--  新增Dialog    -->
      <product-add
        @refreshDataList="getDataList"
        ref="productAdd"
        v-if="productAddShown"
      />
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import ProductAdd from './product-add'
import ProductMixins from '@/mixins/product/product.mixins'
import Product from '../../../model/Product'

export default {
  components: { ProductAdd },
  mixins: [mixinViewModule, ProductMixins],
  name: 'ProductionInfo',
  data () {
    return {
      productAddShown: false,
      mixinViewModuleOptions: {
        getDataListURL: '/product/pproductinfo/info',
        getDataListIsPage: true,
        deleteURL: '/product/pproductinfo',
        deleteIsBatch: true
        // exportURL: '/sys/log/login/export'
      },

      dataForm: {
        // productTypeId: '',
        // productName: ''
        // name: '',
        // type: ''
      }
    }
  },
  mounted () {
    this.getProductTypes()
  },
  methods: {
    handleResponseListData (data) {
      data = data.map(item => {
        return new Product(item)
      })
      return data
    },
    clickOnDetail (productId) {
      this.$router.push({
        name: 'product-detail',
        params: {
          id: productId
        }
      })
    },
    clickInfoEdit () {
      this.productAddShown = true

      this.$nextTick(() => {
        this.$refs.productAdd.visible = true
      })
    },
    clickOnDelete (productId) {
      //  /product/pproductinfo/delproductfunct
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        // after delete confirmation
        this.$http.delete(
          `/product/pproductinfo/delproductfunct?productId=${productId}`
        ).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
